<template>
  <view class="service-box">
    <view
      class="service-left-box"
      @click="handleClick(recProductQa)"
      :data-spmCntSuffix="'message.productServiceCard..productUrlJump@'"
      :data-custom="1"
      :data-spm="1"
    >
      <view class="service-img-box">
        <image
          :src="recProductQa.mainPictureUrl"
          mode="scaleToFill"
          class="service-img"
        />
        <view class="service-status" v-if="recProductQa.sourceType === 'ORDER'">{{recProductQa.orderStatus}}</view>
      </view>
      <view class="service-content-box">
        <view class="service-title omit1">{{recProductQa.title}}</view>
        <view class="service-date" v-if="recProductQa.useDate">使用日期：{{recProductQa.useDate}}</view>
        <view class="service-price" v-if="recProductQa.salePrice">
          <view class="price">¥{{recProductQa.salePrice}}</view>
          <view class="code" v-if="recProductQa.marketPrice">起</view>
        </view>
      </view>
    </view>
    <view
      class="service-right"
      :class="isSignOutService ? 'disabled' : ''"
      @click="signOutService"
      :data-spmCntSuffix="'message.productServiceCard.signOutService@'"
      :data-custom="1"
      :data-spm="{'pos': '退出咨询'}"
    >
      退出咨询
    </view>
  </view>
</template>

<script>
export default {
  props: {
    recProductQa: {
      type: Object,
    },
  },
  computed: {},
  data() {
    return {
      isSignOutService: false
    };
  },
  watch: {},
  methods: {
    handleClick(data) {
      if (data.sourceType === 'ORDER') {
        this.$navTo('/packageApp/pages/orderCode/ordercode', {orderId: data.orderId}, 'navigateTo')
      } else {
        this.$productUrlJump(data, true)
      }
    },
    signOutService() {
      uni.removeStorageSync('cardType')
      this.isSignOutService = true
      this.$emit('signOutService')
    },
  },
};
</script>

<style scoped lang="scss">
.service-box {
  width: calc(100% - 56rpx);
  position: absolute;
  top: 0;
  height: 140rpx;
  // position: sticky;
  z-index: 9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border-radius: 26rpx;
  border: 4rpx solid #B4EF4E;
  padding: 8rpx;
  margin: 16rpx 28rpx 0 28rpx;
  .service-left-box {
    display: flex;
    align-items: center;
    .service-img-box {
      position: relative;
    }
    .service-img {
      width: 116rpx;
      height: 116rpx;
      border-radius: 16rpx;
    }
    .service-status {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 44rpx;
      background: rgba(0,0,0,0.45);
      border-radius: 0rpx 0rpx 16rpx 16rpx;
      font-weight: 600;
      font-size: 24rpx;
      color: #B4EF4E;
      line-height: 44rpx;
      text-align: center;
    }
    .service-content-box {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin: 12rpx 49rpx 12rpx 20rpx;
      flex: 1;
      .service-title {
        font-weight: 600;
        font-size: 28rpx;
        color: #404062;
        line-height: 40rpx;
        margin-bottom: 18rpx;
        max-width: 280rpx;
      }
      .service-date {
        font-size: 24rpx;
        color: #767697;
        line-height: 24rpx;
      }
      .service-price {
        display: flex;
        align-items: center;
        .price {
          font-weight: 600;
          font-size: 24rpx;
          color: #F93F55;
          line-height: 34rpx;
        }
        .code {
          font-weight: 400;
          font-size: 20rpx;
          color: #B5B5D2;
          line-height: 20rpx;
        }
      }
    }
  }
  .service-right {
    width: 180rpx;
    height: 66rpx;
    font-weight: 600;
    font-size: 28rpx;
    color: #131328;
    line-height: 66rpx;
    text-align: center;
    background: #B4EF4E;
    border-radius: 16rpx;
    margin-right: 25rpx;
    &.disabled {
      background: #E4E4F4;
      color: #B5B5D2;
    }
  }
}
</style>
